<template>
  <div>

    <van-nav-bar
        title="商家招募"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-form @submit="onSubmit">
      <van-field
          v-model="form.name"
          name="name"
          label="姓名"
          placeholder="姓名"
          :rules="[{ required: true, message: '请输入姓名' }]"
      />
      <van-field
          v-model="form.phone"
          name="phone"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请输入手机号' }]"
      />
      <van-field
          v-model="form.mingcheng"
          name="mingcheng"
          label="申请名称"
          placeholder="申请名称"
          :rules="[{ required: true, message: '请输入门店名称' }]"
      />
      <van-field name="img" label="展示图片">
        <template #input>
          <van-uploader v-model="img"/>
        </template>
      </van-field>
      <van-field
          readonly
          clickable
          name="leixing"
          :value="form.leixing"
          label="类型选择"
          placeholder="选择所属类型"
          @click="showPicker1 = true"
      />
      <van-popup v-model="showPicker1" position="bottom">
        <van-picker
            show-toolbar
            :columns="columns1"
            @confirm="onConfirm1"
            @cancel="showPicker1 = false"
        />
      </van-popup>
      <van-field
          readonly
          clickable
          name="shijian"
          :value="form.shijian"
          label="营业时间"
          placeholder="点击选择营业时间"
          @click="showPicker2 = true"
      />
      <van-popup v-model="showPicker2" position="bottom">
        <van-datetime-picker
            type="time"
            @confirm="onConfirm2"
            @cancel="showPicker2 = false"
        />
      </van-popup>
      <van-field
          readonly
          clickable
          name="tianshu"
          :value="form.tianshu"
          label="营业天数"
          placeholder="选择营业天数"
          @click="showPicker3 = true"
      />
      <van-popup v-model="showPicker3" position="bottom">
        <van-picker
            show-toolbar
            :columns="columns2"
            @confirm="onConfirm3"
            @cancel="showPicker3 = false"
        />
      </van-popup>
      <van-field
          readonly
          clickable
          name="diqu"
          :value="form.diqu"
          label="当前地区"
          :placeholder="this.city"
      />
      <van-field
          v-model="form.xiangxi"
          rows="0"
          autosize
          label="详细地址"
          type="textarea"
          placeholder="请输入详细地址"
          show-word-limit
      />
      <van-field name="shenqing" label="">
        <template #input>
          <van-radio-group v-model="shenqing" direction="horizontal">
            <van-radio name="1">勾选代表同意《申请协议》</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">确认提交</van-button>
      </div>
    </van-form>

  </div>
</template>
<script>
import MapLoader from "@/views/mendian/util";

export default {
  data() {
    return {
      shenqing: 0,
      img: [],
      form: {},
      value1: '',
      value2: '',
      columns1: ['商店', '零食店', '水果店'],
      columns2: ['一周五天', '一周七天', '看心情'],
      showPicker1: false,
      showPicker2: false,
      showPicker3: false,
      city: '定位中...',
      a: '',
      R: '',
      Q: '',
      // 经纬度
      Ra: '',
      Qa: '',
    }

  },
  methods: {
    //获取当前地理位置
    addresaaa() {
      this.axios.get(`https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=${this.abcde}&key=497c66a7bfeda317880776a6d296ca5f&radius=1000&extensions=all `)
          .then(res => {
            if (res.data && res.data.regeocode && res.data.regeocode.addressComponent) {
              // 获取区级，将获取到的区名称赋值给this.city
              this.city = res.data.regeocode.addressComponent.district;
              console.log("当前地理位置（区）：" + this.city);
            } else {
              console.error("返回数据格式不符合预期，无法获取区信息");
            }
          })
          .catch(error => {
            console.error("获取地理位置信息出错：", error);
          });
    },

    onConfirm3(value) {
      this.form.tianshu = value;
      this.showPicker3 = false;
    },
    onConfirm2(time) {
      this.form.shijian = time;
      this.showPicker2 = false;
    },
    onConfirm1(value) {
      this.form.leixing = value;
      this.showPicker1 = false;
    },
    onSubmit(values) {
      console.log('submit', values);
      console.log('form', this.form);
      console.log('img', this.img[0].file.name);
      this.form.img = this.img[0].file.name;
      this.form.shijian = String(this.form.shijian)
      this.form.diqu = this.city;
      console.log(this.form.shijian)
      if (this.shenqing == 1) {
        this.axios.post(`http://1.94.221.254:9999/api/qcfw-home/home/merchant/add`, this.form).then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.$toast('提交成功');
            this.$router.push('/shouye')
          } else {
            this.$toast('提交失败');
          }
        })
      } else {
        this.$toast('请勾选同意《申请协议》');
      }
    },
    onClickLeft() {
      this.$router.push('/shouye')
    },
  },
  created() {
    var token = localStorage.getItem('token');
    if (token === null) {
      this.$router.push('/');
    }
    MapLoader();

    // 延迟获取地理位置
    setTimeout(() => {
      const Ra = sessionStorage.getItem("R");
      const Qa = sessionStorage.getItem("Q");
      if (Ra && Qa) {
        this.Ra = Ra;
        this.Qa = Qa;
        console.log("执行已完成");
        console.log("经度=====" + this.Ra);
        console.log("纬度=====" + this.Qa);
        this.abcde = this.Ra + ',' + this.Qa;
        console.log("合起来：" + this.abcde);
        this.addresaaa();
      } else {
        console.error("从sessionStorage获取地理位置数据失败，数据可能不存在或格式不正确");
        // 尝试重新获取地理位置信息并存储到sessionStorage
        this.reGetLocation().then(() => {
          const newRa = sessionStorage.getItem("R");
          const newQa = sessionStorage.getItem("Q");
          if (newRa && newQa) {
            this.Ra = newRa;
            this.Qa = newQa;
            this.abcde = this.Ra + ',' + this.Qa;
            this.addresaaa();
          } else {
            console.error("重新获取地理位置信息后，仍无法从sessionStorage获取到正确数据");
            // 可以继续添加更复杂的兜底逻辑，比如提示用户手动输入等
          }
        }).catch(error => {
          console.error("重新获取地理位置信息出错：", error);
        });
      }
    }, 1);
  }
}
</script>
<style scoped>

</style>
